<template>
  <div class="app-iframe-container">
    <!-- 搜索 -->
    <el-row>
      <el-form label-suffix="：" label-width="120px" label-position="right">
        <el-row>
          <el-col :span="6">
            <el-form-item label="账号">
              <el-input v-model="queryParam.username"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="状态">
              <el-select v-model="queryParam.status">
                <el-option label="有效" value="1"/>
                <el-option label="冻结" value="0"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间">
              <el-date-picker
                v-model="form.addDate"
                type="daterange"
                start-placeholder="开始日期"
                value-format="yyyy-MM-dd"
                end-placeholder="结束日期" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24" el-col style="text-align: center;">
            <el-button type="warning" size="small" icon="el-icon-search" @click="research">查询</el-button>
          </el-col>
        </el-row>

      </el-form>
    </el-row>
    <!-- /搜索 -->
    <!-- 操作按钮-->
    <el-row >
      <el-col :span="24">
        <el-button  type="primary" @click="toAdd()">添加</el-button>

      </el-col>
    </el-row>
    <!-- /操作按钮 -->
    <!-- 表格内容 -->
    <el-row>
      <el-col :span="24">
        <el-table
          v-loading="listLoading"
          :data="data"
          border
          fit
          highlight-current-row
          style="width: 100%;">
          <el-table-column align="center" width="65" >
            <template slot-scope="scope">
              <el-radio v-model="currentRow" :label="scope.$index"><i/></el-radio>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" label="账号" prop="name" />
          <el-table-column label="状态" >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status===enums.userStatusEnum.LOCK.value" type="danger">冻结</el-tag>
              <el-tag v-if="scope.row.status===enums.userStatusEnum.ENABLE.value">可用</el-tag>
            </template>
          </el-table-column>
          <el-table-column :show-overflow-tooltip="true" label="创建时间" >
            <template slot-scope="scope">
              {{ scope.row.addDate | parseDate }}
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- /表格内容 -->
    <!-- 分页 -->
    <div class="pagination-container">
      <pagination v-show="queryParam.total>0" :total="queryParam.total" :page.sync="queryParam.current" :limit.sync="queryParam.size" @pagination="search"/>
    </div>
    <!-- /分页 -->
    <!-- 添加 -->
    <el-dialog :visible.sync="add.visible" :close-on-click-modal="false" title="添加">
      <user-add @complete="addComplete"/>
    </el-dialog>
    <!-- /添加 -->
  </div>
</template>

<script>
import userApi from '@/api/sys/user'
import UserAdd from './add'
import UserEdit from './edit'
import TreeWithRadio from '@/components/TreeWithRadio/index'
import roleApi from '@/api/sys/role'
import permissionApi from '@/api/sys/permission'
import userPermissionApi from '@/api/sys/userPermission'
import userStatusEnum from '@/enums/user/userStatusEnum'
import enableEnum from '@/enums/enableEnum'

export default {
  name: 'UserList',
  components: {
    TreeWithRadio,
    UserEdit,
    UserAdd
  },
  data() {
    return {
      enums: {
        userStatusEnum,
        enableEnum
      },
      queryParam: {
        current: 1,
        size: 10,
        total: 0,
        username: '',
        status: '',
        addDateBegin: '',
        addDateEnd: ''
      },
      form: {
        addDate: ''
      },
      listLoading: true,
      currentRow: '',
      add: {
        visible: false
      },
      data: []
    }
  },
  computed: {
    // 修改按钮是否可用
    editButtonValid() {
      if (this.currentRow === '' || this.currentRow === undefined || this.currentRow == null) {
        return false
      }
      return true
    },
    // 返回当前列的数据
    currentData() {
      if (this.currentRow === '' || this.currentRow === undefined || this.currentRow == null) {
        return {}
      }
      return this.data[this.currentRow]
    }
  },
  mounted() {
    this.search()

  },
  methods: {
    // 转到添加
    toAdd() {
      // this.$router.push('/user/add')
      this.add.visible = true
    },
    // 添加完成
    addComplete(done = false) {
      this.add.visible = false
      if (done) {
        this.search()
      }
    },

    // 处理每页大小改变
    handleSizeChange(val) {
      this.queryParam.size = val
      this.search()
    },
    // 处理页数改变
    handleCurrentChange(val) {
      this.queryParam.current = val
      this.search()
    },
    // 重置分页条件，发起查询
    research() {
      this.queryParam.current = 1
      this.search()
    },
    // 列表
    search() {
      this.listLoading = true
      if (this.form.addDate) {
        this.queryParam.addDateBegin = this.form.addDate[0]
        this.queryParam.addDateEnd = this.form.addDate[1]
      } else {
        this.queryParam.addDateBegin = ''
        this.queryParam.addDateEnd = ''
      }
      userApi.userPage(this.queryParam).then(response => {
        if (response.data.code === 200) {
          var responseData = response.data.data
          this.data = responseData.records
          this.queryParam.current = responseData.current
          this.queryParam.total = responseData.total
          this.currentRow = ''
        } else {
          this.$message.error(response.data.msg)
        }
        this.currentRow = ''
        this.listLoading = false
      })
    },
    // 获取角色列表
    getRoleList() {
      roleApi.roleList().then(response => {
        if (response.data.code === 200) {
          var responseData = response.data.data
          this.editRole.roles = responseData
        }
      })
    },
    // 获取权限列表
    getPermissionList() {
      permissionApi.permissionList().then(response => {
        if (response.data.code === 200) {
          var responseData = response.data.data
          this.editUserPermission.permissions = responseData
        }
      })
    }
  }
}
</script>

<style scoped>
  .el-row {
    margin-bottom: 20px;
  }
  .danger{
    color:#F56C6C
  }
</style>
